import React, { useState } from "react";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Button, Layout, Avatar, Dropdown } from "antd";
import { useDispatch } from "react-redux";
import { changeCollapse } from "../../store/reducers/tab";
import { useNavigate } from "react-router-dom";
import "./index.css";
const { Header, Sider, Content } = Layout;

const MyHeader = (props) => {
  console.log("MyHeader", props);
  const { collapsed, setCollapsed, Collapsed } = props;
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const changeCollapsed = () => {
    dispatch(changeCollapse());
  };
  // 登出
  const logout = () => {
    console.log("logout");
    localStorage.removeItem("token");
    navigate("/login");
  };
  const items = [
    {
      key: "1",
      label: (
        <a target="_blank" rel="noonpener noreferrer">
          个人中心
        </a>
      ),
    },
    {
      key: "2",
      label: (
        <a target="_blank" onClick={() => logout()} rel="noopener noreferrer">
          退出
        </a>
      ),
    },
  ];
  return (
    <Header className="header-container">
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        // onClick={() => setCollapsed(!collapsed)}
        onClick={changeCollapsed}
        style={{
          fontSize: "16px",
          width: 64,
          height: 32,
        }}
      />
      <Dropdown menu={{ items }}>
        <Avatar src={<img src={require("../../assets/images/yidong_small.png")}></img>} />
      </Dropdown>
    </Header>
  );
};
export default MyHeader;
